/* ==========================================================
   Explore Who We Are: Discover More About ConnexR
   File: wwwroot/css/leadership-explore.css
   Used by: Views/Partials/blocklist/Components/leadershipExploreBlock.cshtml
   ========================================================== */
.ld-exp {
  --le-navy: #14256b;
  --le-orange: #ff9a45;
  --le-gutter: 4.6vw;
  --le-ease: cubic-bezier(.65, 0, .35, 1);
  --le-ease-out: cubic-bezier(.16, 1, .3, 1);

  box-sizing: border-box;
  width: 100%;
  padding: clamp(28px, 3.3vw, 84px) var(--le-gutter) clamp(32px, 5.3vw, 136px);
  background: var(--le-navy);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
.ld-exp *, .ld-exp *::before, .ld-exp *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ld-exp__stage { position: relative; }

/* ---------- heading (sits in the empty space above the low steps) ---------- */
.ld-exp__head { position: absolute; top: 0; left: 0; width: 40%; z-index: 2; }
.ld-exp__eyebrow {
  margin-bottom: clamp(10px, 1.6vw, 40px);
  font-size: clamp(11px, .85vw, 22px);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ld-exp__heading { font-size: clamp(24px, 2.2vw, 58px); font-weight: 600; line-height: 1.25; color: #fff; }

/* ---------- steps ---------- */
.ld-exp__cards {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  align-items: end;
  height: clamp(420px, 46vw, 1180px);
  padding-top: clamp(14px, 2vw, 50px);
  margin-right: 1.5vw;
}
.ld-exp__card {
  position: relative;
  display: block;
  height: calc(var(--h, 1) * 100%);
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  text-decoration: none;
  outline: none;
  background: #0f1d55;
}
.ld-exp__card:focus-visible { box-shadow: inset 0 0 0 2px var(--le-orange); }
.ld-exp__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.4s var(--le-ease-out);
}
/* navy wash at the top so the number and title always read */
.ld-exp__shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20, 37, 107, .78) 0%, rgba(20, 37, 107, .35) 30%, rgba(20, 37, 107, .08) 60%, rgba(20, 37, 107, .15) 100%);
  transition: opacity .7s ease;
}
/* orange wash on the active card */
.ld-exp__tint {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(240, 140, 60, .95) 0%, rgba(245, 150, 70, .82) 45%, rgba(250, 160, 85, .35) 80%, rgba(250, 160, 85, .25) 100%);
  opacity: 0;
  transition: opacity .7s ease;
}
.ld-exp__card.is-active .ld-exp__tint { opacity: 1; }
.ld-exp__card.is-active .ld-exp__shade { opacity: 0; }
.ld-exp__card.is-active .ld-exp__img { transform: scale(1.08); }

.ld-exp__body {
  position: relative; z-index: 1;
  display: block;
  padding: clamp(14px, 1.3vw, 34px) clamp(12px, 1.2vw, 30px);
}
.ld-exp__num { display: block; margin-bottom: clamp(8px, 1vw, 26px); font-size: clamp(15px, 1.3vw, 34px); font-weight: 400; line-height: 1; }
.ld-exp__title { display: block; font-size: clamp(12px, .95vw, 24px); font-weight: 600; line-height: 1.35; }
/* short text opens smoothly on the active card */
.ld-exp__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--le-ease); }
.ld-exp__more > span { overflow: hidden; }
.ld-exp__text {
  display: block;
  padding-top: clamp(6px, .6vw, 16px);
  font-family: "DM Sans", "Poppins", sans-serif;
  font-size: clamp(12px, .85vw, 22px);
  line-height: 1.6;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .4s ease;
}
.ld-exp__card.is-active .ld-exp__more { grid-template-rows: 1fr; }
.ld-exp__card.is-active .ld-exp__text { opacity: 1; transform: none; transition: opacity .6s ease .2s, transform .8s var(--le-ease-out) .2s; }

.ld-exp__dots { position: absolute; z-index: 1; left: clamp(12px, 1.2vw, 30px); bottom: clamp(12px, 1.2vw, 30px); display: flex; gap: 4px; }
.ld-exp__dots i { display: block; width: clamp(5px, .45vw, 11px); height: clamp(5px, .45vw, 11px); border-radius: 50%; background: var(--le-orange); transition: transform .5s var(--le-ease-out); }
.ld-exp__card.is-active .ld-exp__dots i:last-child { transform: translateX(4px); }

/* ---------- entrance: steps rise one after another ---------- */
.ld-exp.js-reveal .ld-exp__head { opacity: 0; transform: translateY(18px); }
.ld-exp.js-reveal .ld-exp__card { opacity: 0; transform: translateY(40px); }
.ld-exp.js-reveal.is-visible .ld-exp__fx {
  opacity: 1;
  transform: none;
  transition: opacity .9s ease var(--fd, 0s), transform 1.2s var(--le-ease-out) var(--fd, 0s);
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) { .ld-exp { --le-gutter: 32px; } .ld-exp__cards { margin-right: 0; } }
@media (max-width: 900px) {
  .ld-exp { --le-gutter: 24px; }
  .ld-exp__head { position: static; width: auto; margin-bottom: 24px; }
  /* swipe row of equal cards */
  .ld-exp__cards {
    display: flex;
    gap: 10px;
    height: auto;
    padding-top: 0;
    margin: 0 calc(-1 * var(--le-gutter));
    padding: 0 var(--le-gutter) 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--le-gutter);
    scrollbar-width: none;
  }
  .ld-exp__cards::-webkit-scrollbar { display: none; }
  .ld-exp__card { flex: 0 0 min(64vw, 300px); height: 400px; scroll-snap-align: start; }
}
@media (max-width: 560px) { .ld-exp { --le-gutter: 20px; } .ld-exp__card { height: 360px; } }